<ng-container *ixWithLoadingState="app() as app">
  @if (mainPortal(); as mainPortal) {
    <div class="portal-button-wrapper">
      <button
        mat-icon-button
        ixTest="apps-web-portal"
        matTooltipPosition="above"
        [attr.aria-label]="mainPortal.label"
        [matTooltip]="mainPortal.label"
        (click)="openPortal(mainPortal.url)"
      >
        <ix-icon name="mdi-web"></ix-icon>
      </button>

      @if (otherPortals().length > 0) {
        <button
          mat-icon-button
          ixTest="apps-web-portal-dropdown"
          matTooltipPosition="above"
          [matTooltip]="'Other Portals' | translate"
          [matMenuTriggerFor]="portalMenu"
        >
          <ix-icon name="mdi-menu-down" class="dropdown-icon"></ix-icon>
        </button>

        <mat-menu #portalMenu="matMenu">
          @for (portal of otherPortals(); track portal.label) {
            <button mat-menu-item [ixTest]="['apps-web-portal', portal.label]" (click)="openPortal(portal.url)">
              {{ portal.label }}
            </button>
          }
        </mat-menu>
      }
    </div>
  }

  <button
    mat-icon-button
    ixTest="apps-restart"
    matTooltipPosition="above"
    [attr.aria-label]="'Restart App' | translate"
    [matTooltip]="'Restart App' | translate"
    [disabled]="app.state === appState.Deploying"
    (click)="onRestartApp(app)"
  >
    <ix-icon name="mdi-restart"></ix-icon>
  </button>

  <button
    mat-icon-button
    ixTest="apps-details"
    matTooltipPosition="above"
    [attr.aria-label]="'Check App Details' | translate"
    [matTooltip]="'Check App Details' | translate"
    (click)="openAppDetails(app)"
  >
    <ix-icon name="mdi-cog"></ix-icon>
  </button>
</ng-container>
